<template>
  <div>
    <div id="yetou">
      <el-page-header
        @back="goBack"
        :content="this.hname + '  ' + this.fname + '  ' + '分户信息'"
      >
      </el-page-header>
    </div>
    <div id="fenhu">
      <el-table
        :data="roomList"
        style="width: 100%; line-height: 50%"
        border
        @row-click="rowClick"
      >
        <el-table-column prop="roomId" label="楼栋id" width="280" v-if="false">
        </el-table-column>
        <el-table-column prop="storeyNo" label="楼层" width="280">
        </el-table-column>
        <el-table-column prop="roomNo" label="房间号" width="280">
        </el-table-column>
        <el-table-column prop="proposerName" label="户主">
          <template slot-scope="scope">
            <span style="margin-left: 10px" v-if="scope.row.roomStatus == 1"
              >暂无</span
            >
            <span style="margin-left: 10px" v-if="scope.row.roomStatus == 2">{{
              scope.row.proposerName
            }}</span>
            <span style="margin-left: 10px" v-if="scope.row.roomStatus == 3">{{
              scope.row.proposerName
            }}</span>
            <span style="margin-left: 10px" v-if="scope.row.roomStatus == 0">{{
              scope.row.proposerName
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="roomStatus" label="备注">
          <template slot-scope="scope">
            <span style="margin-left: 10px" v-if="scope.row.roomStatus == 1"
              >预售</span
            >
            <span style="margin-left: 10px" v-if="scope.row.roomStatus == 2"
              >查封</span
            >
            <span style="margin-left: 10px" v-if="scope.row.roomStatus == 3"
              >抵押</span
            >
            <span style="margin-left: 10px" v-if="scope.row.roomStatus == 0"
              >已售</span
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-dialog
        title="房间详细信息"
        :visible.sync="dialogVisible"
        width="70%"
        :before-close="handleClose"
      >
        <div id="fangzi">
          <div id="huxingtu">
            户型图:<el-image :src="room.bak1" style="width:400px; height:400px"></el-image>
          </div>
        
        <div id="msg">
          <div id="left">
            房间编号：
            <span>{{room.roomNo}}</span>
          </div>
          <div id="left">
            房屋面积：
            <span>{{room.roomArea}}</span>
          </div>
          <div id="left">
            房屋价格：
            <span>{{room.bak2}}/m²</span>
          </div>
        </div>
      </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      hname: "",
      fid: 0,
      fname: "",
      roomList: [],
      room: {},
    };
  },
  methods: {
    goBack() {
      this.$router.push("/Higher");
    },
    queryAll() {
      this.$axios
        .get("/presell-serv/Rooms/queryAll/" + this.fid)
        .then((res) => {
          if (res.data.code == 200) {
            this.roomList = res.data.data.roomList;
          }
        });
    },
    rowClick(row, cloumn) {
      this.$axios
        .get("/presell-serv/Rooms/queryById/" + row.roomId)
        .then((res) => {
          if (res.data.code == 200) {
            this.room = res.data.data.room;
            this.dialogVisible = true;
          }
        });
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
  },
  mounted() {
    this.fid = this.$route.params.fid;
    this.hname = window.localStorage.getItem("hname");
    this.fname = this.$route.params.fname;
    this.queryAll();
  },
};
</script>
<style scoped>
#yetou {
  background-color: rgba(255, 255, 255, 0.801);
}
#biaoge {
  border: 1px solid;
}
#fangzi {
  border: 0px solid blue;
  height: 650px;
}
#huxingtu{
  border: 0px solid red;
  width: 40%;
  text-align: left;
  font-size: 20px;
  font-weight: bold;
  float: left;
}
#msg{
  border: 0px solid red;
  float: right;
  width:59%;
  height: 97%;
}
#left{
  border: 0px solid red;
  width: 100%;
  text-align: center;
  line-height: 100px;
  margin-top:55px;
  font-size: 20px;
  font-weight: bold;
}
</style>